Angular-এ রিয়্যাক্টিভ ফর্মস (Reactive Forms) একটি ফর্ম হ্যান্ডলিং পদ্ধতি যা ফর্মের ডেটা এবং ভ্যালিডেশনকে কম্পোনেন্টের ক্লাসে প্রোগ্রামেটিক্যালি ম্যানেজ করতে সহায়ক। রিয়্যাক্টিভ ফর্মস ব্যবহার করলে আপনি ফর্মের অবস্থা এবং লজিককে আরও সহজে ট্র্যাক করতে পারেন এবং এগুলোকে আরও বেশি কন্ট্রোল করতে পারেন।

এটি model-driven অ্যাপ্রোচের একটি অংশ, যেখানে ফর্মের সমস্ত লজিক এবং ডেটা কম্পোনেন্টের ক্লাসে থাকে, এবং ফর্মটি ইউআই (UI) থেকে পৃথক থাকে। রিয়্যাক্টিভ ফর্মস সাধারণত বড়, ডাইনামিক, এবং কমপ্লেক্স ফর্মের জন্য উপযুক্ত।

রিয়্যাক্টিভ ফর্মস এবং টেমপ্লেট-ভিত্তিক ফর্মস এর মধ্যে পার্থক্য

রিয়্যাক্টিভ ফর্ম তৈরি

ReactiveFormsModule ব্যবহার করার জন্য প্রথমে আপনাকে এটি আপনার অ্যাপ মডিউলে ইমপোর্ট করতে হবে।

1. ReactiveFormsModule ইমপোর্ট করা

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms'; // ReactiveFormsModule ইমপোর্ট করা

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // মডিউলে ReactiveFormsModule যুক্ত করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. ফর্ম কনট্রোল তৈরি করা

রিয়্যাক্টিভ ফর্মের মূল উপাদান হলো FormControl, FormGroup এবং FormArray। এগুলোর মাধ্যমে আপনি ফর্মের কন্ট্রোল এবং ডেটার স্ট্রাকচার তৈরি করেন।

FormControl

FormControl একটি একক ইনপুট ফিল্ডের মান এবং স্ট্যাটাস ট্র্যাক করার জন্য ব্যবহৃত হয়।

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `<input [formControl]="nameControl">`
})
export class AppComponent {
  nameControl = new FormControl('');
}

এখানে, FormControl দ্বারা একটি ইনপুট ফিল্ড তৈরি করা হয়েছে, যা nameControl নামক কন্ট্রোল দ্বারা ট্র্যাক হচ্ছে।

FormGroup

FormGroup একাধিক FormControl বা FormArray কে গ্রুপ আকারে একত্রিত করে।

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm">
      <input formControlName="name">
      <input formControlName="email">
    </form>
  `
})
export class AppComponent {
  userForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });
}

এখানে, FormGroup দিয়ে দুটি FormControl (একটি নামের জন্য এবং একটি ইমেইলের জন্য) গ্রুপ করা হয়েছে। formControlName দিয়ে HTML ফর্মের ইনপুটগুলিকে সংযুক্ত করা হয়।

FormArray

FormArray ব্যবহার করা হয় যখন একাধিক একই ধরনের কন্ট্রোল (যেমন একাধিক ইনপুট ফিল্ড) প্রয়োজন হয়।

import { Component } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm">
      <div formArrayName="addresses">
        <div *ngFor="let address of addresses.controls; let i = index">
          <input [formControlName]="i">
        </div>
      </div>
    </form>
  `
})
export class AppComponent {
  userForm = new FormGroup({
    addresses: new FormArray([
      new FormControl('Address 1'),
      new FormControl('Address 2')
    ])
  });

  get addresses() {
    return (this.userForm.get('addresses') as FormArray);
  }
}

এখানে, FormArray ব্যবহার করে একাধিক ঠিকানা ইনপুট ফিল্ড তৈরি করা হয়েছে। *ngFor ব্যবহার করে ফর্মের প্রতিটি কন্ট্রোল রেন্ডার করা হচ্ছে।

ফর্ম ভ্যালিডেশন

ফর্ম কন্ট্রোলের সাথে ভ্যালিডেটর যোগ করা যায়, যেটি ফর্মের ইনপুট ভ্যালিড করতে সহায়ক। Angular দুটি ধরনের ভ্যালিডেটর প্রদান করে: সিঙ্গেল ভ্যালিডেটর এবং কম্বিনেশন ভ্যালিডেটর।

সিঙ্গেল ভ্যালিডেটর

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <input [formControl]="nameControl">
    <div *ngIf="nameControl.invalid && nameControl.touched">Name is required</div>
  `
})
export class AppComponent {
  nameControl = new FormControl('', Validators.required);
}

এখানে, Validators.required একটি সিঙ্গেল ভ্যালিডেটর যা ইনপুট ফিল্ডটি খালি থাকা চলবে না।

কাস্টম ভ্যালিডেটর

কাস্টম ভ্যালিডেটর ব্যবহার করলে আপনি নিজের ভ্যালিডেশন লজিক তৈরি করতে পারেন।

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

function ageValidator(control: FormControl) {
  if (control.value && control.value < 18) {
    return { 'ageInvalid': true };
  }
  return null;
}

@Component({
  selector: 'app-root',
  template: `
    <input [formControl]="ageControl">
    <div *ngIf="ageControl.hasError('ageInvalid')">Age must be 18 or older</div>
  `
})
export class AppComponent {
  ageControl = new FormControl('', ageValidator);
}

এখানে, ageValidator একটি কাস্টম ভ্যালিডেটর, যা ইউজারের বয়স ১৮ বছরের নিচে হলে ত্রুটি দেখাবে।

ফর্ম সাবমিট এবং ডেটা

ফর্মের ডেটা অ্যাক্সেস করতে form.value ব্যবহার করা হয় এবং ফর্ম সাবমিট করার জন্য form.submit() বা ngSubmit ব্যবহার করা হয়।

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="name">
  <button type="submit">Submit</button>
</form>

onSubmit() {
  console.log(this.userForm.value);
}

এখানে, onSubmit() মেথডে ফর্মের ডেটা আউটপুট করা হচ্ছে।

সারাংশ

রিয়্যাক্টিভ ফর্মস অ্যাঙ্গুলার অ্যাপ্লিকেশনে শক্তিশালী এবং নমনীয় ফর্ম হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়। এটি আপনাকে ফর্ম ডেটা এবং ভ্যালিডেশন কন্ট্রোল করতে সহজ উপায়ে সাহায্য করে এবং বড় এবং জটিল ফর্মের জন্য আদর্শ।